<template>
  <div style="padding: 10px 20px">
    <h2 style="text-align: left;width: 100%">数据查询</h2>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="走步" name="1">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.userId" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item label="走路步数：">
              <el-select v-model="formInline.step" placeholder="走路步数">
                <el-option label="全部" value="0"></el-option>
                <el-option label="5000步以上" value=5000></el-option>
                <el-option label="10000步以上" value=10000></el-option>
                <el-option label="20000步以上" value=20000></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span class="demonstration">日期：</span>
              <el-date-picker
                v-model="times"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="account" label="用户账号">
                </el-table-column>
                <el-table-column prop="username" label="用户昵称">
                </el-table-column>
                <el-table-column prop="step" label="走步步数">
                </el-table-column>
                <el-table-column prop="stepDistance" label="走步距离">
                </el-table-column>
                <el-table-column prop="stepTime" label="走步时长">
                </el-table-column>
                <el-table-column prop="heat" label="消耗热量">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
<!--              页码                          -->
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[10, 50, 100]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalRows"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="体重" name="2">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.user" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item label="身体类型：">
              <el-select v-model="formInline.region" placeholder="身体类型">
                <el-option label="全部" value=""></el-option>
                <el-option label="偏瘦" value="偏瘦"></el-option>
                <el-option label="标准" value="标准"></el-option>
                <el-option label="偏胖" value="偏胖"></el-option>
                <el-option label="肥胖" value="肥胖"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="体重：">
              <el-input-number v-model="num" @change="handleChange"></el-input-number>
              公斤 至
              <el-input-number v-model="num1" @change="handleChange"></el-input-number>
              公斤
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="" label="用户账号">
                </el-table-column>
                <el-table-column prop="" label="用户昵称">
                </el-table-column>
                <el-table-column prop="" label="体重(公斤)">
                </el-table-column>
                <el-table-column prop="" label="脂肪率">
                </el-table-column>
                <el-table-column prop="" label="BMI">
                </el-table-column>
                <el-table-column prop="" label="身体类型">
                </el-table-column>
                <el-table-column prop="" label="最近测量时间">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="睡眠" name="3">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.user" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item>
              <span class="demonstration">日期：</span>
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="" label="用户账号">
                </el-table-column>
                <el-table-column prop="" label="用户昵称">
                </el-table-column>
                <el-table-column prop="" label="累计睡眠时长">
                </el-table-column>
                <el-table-column prop="" label="累计深睡时长">
                </el-table-column>
                <el-table-column prop="" label="累计浅睡时长">
                </el-table-column>
                <el-table-column prop="" label="累计清醒时长">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="心率" name="4">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.user" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item>
              <span class="demonstration">日期：</span>
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="" label="用户账号">
                </el-table-column>
                <el-table-column prop="" label="用户昵称">
                </el-table-column>
                <el-table-column prop="" label="平均静息心率">
                </el-table-column>
                <el-table-column prop="" label="静息心率过高">
                </el-table-column>
                <el-table-column prop="" label="静息心率过低">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="血压" name="5">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.user" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item label="血压状态：">
              <el-select v-model="formInline.region" placeholder="血压状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="高压偏高" value="高压偏高"></el-option>
                <el-option label="高压偏低" value="高压偏低"></el-option>
                <el-option label="低压偏高" value="低压偏高"></el-option>
                <el-option label="低压偏低" value="低压偏低"></el-option>
                <el-option label="高压低压均高" value="高压低压均高"></el-option>
                <el-option label="高压低压均低" value="高压低压均低"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="" label="用户账号">
                </el-table-column>
                <el-table-column prop="" label="用户昵称">
                </el-table-column>
                <el-table-column prop="" label="平均高压">
                </el-table-column>
                <el-table-column prop="" label="平均低压">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="血糖" name="6">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.user" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item label="血糖状态：">
              <el-select v-model="formInline.region" placeholder="身体类型">
                <el-option label="全部" value=""></el-option>
                <el-option label="偏低" value="偏低"></el-option>
                <el-option label="偏高" value="偏高"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="" label="用户账号">
                </el-table-column>
                <el-table-column prop="" label="用户昵称">
                </el-table-column>
                <el-table-column prop="" label="血糖">
                </el-table-column>
                <el-table-column prop="" label="最近测量时间">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="体温" name="7">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.user" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item label="体温状态：">
              <el-select v-model="formInline.region" placeholder="体温状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="低烧" value="低烧"></el-option>
                <el-option label="发烧" value="发烧"></el-option>
                <el-option label="高烧" value="高烧"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="" label="用户账号">
                </el-table-column>
                <el-table-column prop="" label="用户昵称">
                </el-table-column>
                <el-table-column prop="" label="体温">
                </el-table-column>
                <el-table-column prop="" label="最近测量时间">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="运动" name="8">
        <div>
          <h3>查询条件</h3>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input v-model="formInline.user" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item label="运动类型：">
              <el-select v-model="formInline.region" placeholder="身体类型">
                <el-option label="全部" value=""></el-option>
                <el-option label="跑步" value="跑步"></el-option>
                <el-option label="深蹲" value="深蹲"></el-option>
                <el-option label="仰卧起坐" value="仰卧起坐"></el-option>
                <el-option label="俯卧撑" value="俯卧撑"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span class="demonstration">日期：</span>
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <h3>数据列表</h3>
          <el-row>
            <el-col :span="24">
              <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column prop="" label="用户账号">
                </el-table-column>
                <el-table-column prop="" label="用户昵称">
                </el-table-column>
                <el-table-column prop="" label="跑步距离">
                </el-table-column>
                <el-table-column prop="" label="深蹲数量">
                </el-table-column>
                <el-table-column prop="" label="仰卧起坐数量">
                </el-table-column>
                <el-table-column prop="" label="俯卧撑数量">
                </el-table-column>
                <el-table-column label="操作">
                </el-table-column>
              </el-table>
              <div class="block">
                <el-pagination
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                </el-pagination>
              </div>

            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import axios from "axios";
import {getList,add} from "@/api/query"

export default {
  name: "Query",
  data() {
    return {
      datas: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      activeName: '1',
      num: "",
      num1: "",
      //查询条件
      formInline: {
        userId: '',
        step: '',
        //时间
        times: '',

        //页数
        pageNum: 1,
        //当前页数据
        pageSize: 5,


      },
      //总行数
      totalRows:'',


    };
  },
  async created(){
   this.onSubmit()
},
  methods: {
    //------------------查询数据方法-----------------
  /*  async initData() {
      let res = await getList(this.formInline)
      this.datas=res.data.records
      this.totalRows = res.data.total

      //通过后端的接口，读取来自后端的数据
      this.axios.get('health/find', {
        params: {
          step: this.formInline.step,
          userId: this.formInline.userId,
          startDate: this.formInline.times[0],
          endDate: this.formInline.times[1],
          pageNum:this.currentPage,
          pageSize:this.currentSize
        }
      })
        //回调，处理结果
        .then((res) => {
          //回传总行数，给数据赋值
          this.totalRows = res.data.records.total;
          this.datas = res.data.records;
        })
        .catch((error) => {
          console.log(error);
        });
    },*/


    handleClick(tab, event) {
      console.log(tab, event);
    },

    //--------------点击查询事件 回传查询到的数据---------------------
    async onSubmit() {
      let res = await getList(this.formInline)
      this.datas=res.data.records
      this.totalRows = res.data.total
      console.log(res.data.records);
    },


    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //当前页改变事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.initData();
    },
    //当前页改变事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    handleChange(value) {
      console.log(value);
    }
  }

}
</script>

<style scoped>

</style>
